<!-- HTML部分 -->
<input type="file" id="imageInput" multiple accept="image/*">
<button onclick="uploadImages()">上传图片</button>
<div id="gallery"></div>

<script>
function uploadImages() {
    const files = document.getElementById('imageInput').files;
    const formData = new FormData();
    for (let file of files) {
        formData.append('images', file);
    }

    // AJAX上传
    fetch('/tools/picture', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.urls) {
            data.urls.forEach(url => addImageToGallery(url));
        }
    });
}

function addImageToGallery(url) {
    const img = document.createElement('img');
    img.src = url;
    img.className = 'thumbnail';
    img.onclick = () => copyUrl(url);
    document.getElementById('gallery').appendChild(img);
}

function copyUrl(url) {
    navigator.clipboard.writeText(url)
        .then(() => alert('链接已复制！'))
        .catch(err => console.error('复制失败:', err));
}
</script>

<style>
.thumbnail {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;
}
.thumbnail:hover {
    border-color: #007bff;
}
</style>